<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"  xmlns="http://www.w3.org/1999/xhtml"
                                     xmlns:th="http://www.thymeleaf.org"> <!--<![endif]-->
<head>

    <!-- Basic Page Needs
  ================================================== -->
    <meta charset="utf-8">
    <title>饿了吗菜单</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Mobile Specific Metas
  ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS
  ================================================== -->
    <link rel="stylesheet" href="/css/zerogrid.css">
    <link rel="stylesheet" href="/css/style.css">

    <script src="/js/jquery-latest.min.js"></script>
    <script src="/js/script.js"></script>


    <!--[if lt IE 8]>
    <div style=' clear: both; text-align:center; position: relative;'>
        <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
            <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
        </a>
    </div>
    <![endif]-->
    <!--[if lt IE 9]>
    <script src="/js/html5.js"></script>
    <script src="/js/css3-mediaqueries.js"></script>
    <![endif]-->

</head>
<body>
<div class="wrap-body">

    <!--////////////////////////////////////Header-->
    <header class="bg-theme">
        <div class="wrap-header zerogrid">
            <div class="row">
                <div id="cssmenu">
                    <ul>
                        <li class='active'><a href="/index">主页</a></li>
                        <li class='active'><a href="/logout">退出</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </header>


    <!--////////////////////////////////////Container-->
    <section id="container">
        <div class="zerogrid">
            <div class="wrap-container clearfix">
                <div id="main-content">
                    <div class="wrap-box"><!--Start Box-->
                        <div class="zerogrid">
                            <div class="header">
                                <h2>菜单</h2>
                            </div>
                            <div class="row">
                                <div class="col-1-3" th:each="data1:${datalist1}">
                                    <div class="wrap-col">
                                        <div class="item t-center">
                                            <div class="item-container">
                                                    <div class="item-caption">
                                                        <div class="item-caption-inner">
                                                            <div class="item-caption-inner1">
                                                                <span th:text="'名称: '+${data1.dname}"></span>
                                                                <span th:text="'介绍: '+${data1.details}"></span>
                                                                <span th:text="'销量: '+${data1.count}"></span>
                                                                <span th:text="'数量: '+${data1.num}"></span>
                                                                <span th:text="'价格: '+${data1.price}"></span>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <img th:src="${data1.images}" alt="no image nie~">
                                            </div>
                                            <div class="item-info">
                                                <a href="#" th:attr="onclick='buyDish(event, \'' + ${data1.dname} + '\')'">购买</a>
                                                <a href="#" th:attr="onclick='deleteDish(event, \'' + ${data1.dname} + '\')'">删除</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <button id="showAddFormButton">添加菜品</button>

    <div id="addDishForm">
        <button id="closeFormButton" class="close-button">关闭</button>
        <h2>添加菜品</h2>
        <form id="dishForm" action="/api/addDish" method="post">
            <label for="dishName">菜品名称:</label>
            <input type="text" id="dishName" name="dname" required><br>

            <label for="dishDescription">菜品介绍:</label>
            <textarea id="dishDescription" name="detail"></textarea><br>

            <label for="dishPrice">菜品价格:</label>
            <input type="number" id="dishPrice" name="price" required><br>

            <label for="dishQuantity">菜品数量:</label>
            <input type="number" id="dishQuantity" name="num" required><br>

            <input type="submit" value="提交">
        </form>
    </div>
    <!--////////////////////////////////////Footer-->
    <footer>
        <div class="zerogrid">
            <div class="wrap-footer">
                <div class="row">
                    <h3>饿了吗</h3>
                    <span>Phone / +18836190925 </span></br>
                    <span>Email / 2162408515@qq.com  </span></br>
                    <span>Write by Haluki 2023/5/24 </span></br>
                    <span><strong>如有问题，请联系我们 </strong></span>
                </div>
            </div>
        </div>
    </footer>
</div>
</body>
<style>
    body {
        font-family: Arial, sans-serif;
    }
    #addDishForm {
        display: none;
        border: 1px solid #ccc;
        padding: 20px;
        max-width: 400px;
        margin: 0 auto;
        background-color: #f8f8f8;
        border-radius: 5px;
    }
    h2 {
        text-align: center;
        color: #333;
    }
    label {
        display: block;
        margin-bottom: 5px;
    }
    input[type="text"],
    input[type="number"],
    textarea {
        width: 100%;
        padding: 8px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 3px;
    }
    .close-button {
        margin-left: 311px;
        background-color: #f44336;
        color: white;
        padding: 5px 10px;
        border: none;
        border-radius: 3px;
        cursor: pointer;
        top: 10px;
        right: 10px;
    }
    .close-button:hover {
        background-color: #d32f2f;
    }
    input[type="submit"] {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }
    input[type="submit"]:hover {
        background-color: #45a049;
    }
    #showAddFormButton {
        background-color: #4CAF50;
        color: white;
        padding: 10px 20px;
        border: none;
        border-radius: 3px;
        cursor: pointer;
    }
    #showAddFormButton:hover {
        background-color: #45a049;
    }
</style>
    <!-- Google Map -->
    <script>
        $('.maps').click(function () {
            $('.maps iframe').css("pointer-events", "auto");
        });

        $( ".maps" ).mouseleave(function() {
            $('.maps iframe').css("pointer-events", "none");
        });
        function buyDish(event, dname) {
            event.preventDefault();  // 阻止默认行为（跳转链接）

            $.ajax({
                type: "POST",
                url: "/api/dish/buy",  // 后端接口URL
                data: { dishName: dname },  // 传递的数据，这里是菜品名字
                success: function(response) {
                    // 请求成功后的处理逻辑
                    console.log("购买成功!");
                },
                error: function(error) {
                    // 请求失败后的处理逻辑
                    console.error("购买失败:", error);
                }
            });
        }

        function deleteDish(event, dname) {
            event.preventDefault();  // 阻止默认行为，即阻止跳转到链接指定的URL

            // 发送请求到后端，将dname传递给后端
            // 这里可以使用Ajax或其他方式发送请求
            // 示例使用Fetch API发送POST请求
            var formData = new URLSearchParams();
            formData.append('dishName', dname);

            fetch('/api/dish/delete', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: formData
            })
                .then(response => {
                    // 处理响应
                    // 根据需要处理后端返回的响应数据
                })
                .catch(error => {
                    console.error('Error:', error);
                });
        }
        document.getElementById('showAddFormButton').addEventListener('click', function () {
            document.getElementById('addDishForm').style.display = 'block';
        });
        document.getElementById('closeFormButton').addEventListener('click', function () {
            document.getElementById('addDishForm').style.display = 'none';
        });

    </script>
</html>